<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css">
	<!--引入Jquery主文件-->
	<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
	<!--引入JqueryEasyUI主文件-->
	<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
	<!--让easyUI支持中文-->
	<script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript">
    $('#tt').datagrid({  
        title:'Editable DataGrid',  
        iconCls:'icon-edit',  
        width:660,  
        height:250,  
        singleSelect:true,  
        idField:'customerId',  
        url:'${pageContext.request.contextPath}/pages/customer/query.do',  
        columns:[[  
            {field:'customerId',title:'customerId',width:60},  
            {field:'customerName',title:'customerName',width:100,  
                formatter:function(value){  
                    for(var i=0; i<products.length; i++){  
                        if (products[i].productid == value) return products[i].name;  
                    }  
                    return value;  
                },  
                editor:{  
                    type:'combobox',  
                    options:{  
                        valueField:'productid',  
                        textField:'name',  
                        data:products,  
                        required:true  
                    }  
                }  
            },  
            {field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},  
            {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},  
            {field:'attr1',title:'Attribute',width:150,editor:'text'},  
            {field:'status',title:'Status',width:50,align:'center',  
                editor:{  
                    type:'checkbox',  
                    options:{  
                        on: 'P',  
                        off: ''  
                    }  
                }  
            },  
            {field:'action',title:'Action',width:70,align:'center',  
                formatter:function(value,row,index){  
                    if (row.editing){  
                        var s = '<a href="#" onclick="saverow('+index+')">Save</a> ';  
                        var c = '<a href="#" onclick="cancelrow('+index+')">Cancel</a>';  
                        return s+c;  
                    } else {  
                        var e = '<a href="#" onclick="editrow('+index+')">Edit</a> ';  
                        var d = '<a href="#" onclick="deleterow('+index+')">Delete</a>';  
                        return e+d;  
                    }  
                }  
            }  
        ]],  
        onBeforeEdit:function(index,row){  
            row.editing = true;  
            $('#tt').datagrid('refreshRow', index);  
        },  
        onAfterEdit:function(index,row){  
            row.editing = false;  
            $('#tt').datagrid('refreshRow', index);  
        },  
        onCancelEdit:function(index,row){  
            row.editing = false;  
            $('#tt').datagrid('refreshRow', index);  
        }  
    });  
	</script>


  </head>
 <body>   
 <table id="tt">
 </table>
</body>  
</html>